<template>
	<view>
		<!-- 顶部搜索区域 -->
		<view class="search-bar">
			<view class="search-box">
				<uni-icons type="search" size="20" color="#999"></uni-icons>
				<input class="search-input" placeholder="搜索姓名、手机号或关键词" v-model="searchKeyword"
					@confirm="handleSearch" />
				<button v-if="searchKeyword" class="clear-btn" @tap="clearSearch">
					<uni-icons type="clear" size="20" color="#999"></uni-icons>
				</button>
			</view>
		</view>

		<!-- Tab切换区域 -->
		<view class="tabs">
			<view :class="['tab-item', activeTab === 'truck' ? 'active' : '']" @click="switchTab('truck')">
				货车
			</view>
			<view :class="['tab-item', activeTab === 'bus' ? 'active' : '']" @click="switchTab('bus')">
				客车
			</view>
		</view>

		<!-- 原有内容区域 -->
		<view class="edgeInsetTop"></view>
		<wanl-empty v-if="addressList.length === 0 && status !== 'loading'" text="暂无入驻信息" />
		<view class="margin-top-bj">
			<view class="cu-list menu-avatar">
				<view class="cu-item" v-for="(item, index) in addressList" :key="item.id">
					<view class="cu-avatar round lg">
						<image :src="$wanlshop.oss(item.avatar, 90, 90, 2, 'avatar')" mode="aspectFit"
							@tap.stop="previewImage(item.avatar)"></image>
					</view>

					<view class="content">
						<view class="flex justify-between">
							<view>
								<text class="wanl-pip margin-right-sm text-lg">{{ item.username }}</text>
								<text class="wanl-gray-light text-sm">{{ item.phone }}</text>
							</view>
							<button class="cu-btn round sm bg-gradual-orange" @tap.stop="showContact(item)">联系</button>
						</view>

						<view class="text-sm wanl-gray margin-top-xs"
							style="line-height: 1.5; word-break: break-word; white-space: normal;">
							{{ item.content || '暂无个人介绍' }}
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 原有底部内容 -->
		<uni-load-more :status="status" :content-text="contentText" />
		<view class="edgeInsetBottom"></view>

		<!-- 联系方式弹窗 -->
		<view class="cu-modal" :class="contactModal ? 'show' : ''">
			<view class="cu-dialog" @tap.stop>
				<view class="cu-bar bg-white justify-end">
					<view class="content">联系方式</view>
					<view class="action" @tap="hideContactModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					<view class="flex align-center margin-bottom" v-if="currentContact.phone">
						<text class="wlIcon-dianhua margin-right"></text>
						<text>{{ currentContact.phone }}</text>
						<button class="cu-btn round sm bg-green margin-left"
							@tap="makePhoneCall(currentContact.phone)">拨打</button>
					</view>
					<view class="flex align-center" v-if="currentContact.wx">
						<text class="wlIcon-weixin margin-right"></text>
						<text>{{ currentContact.wx }}</text>
						<button class="cu-btn round sm bg-green margin-left"
							@tap="copyWechat(currentContact.wx)">复制</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				source: 0,
				order_id: 0,
				addressList: [],
				currentContact: {
					phone: '',
					wx: '',
				},
				contactModal: false,
				total: 0,
				current_page: 1,
				last_page: 1,
				status: 'loading',
				contentText: {
					contentdown: ' ',
					contentrefresh: '正在加载..',
					contentnomore: ''
				},
				// 新增数据
				searchKeyword: '', // 搜索关键词
				activeTab: 'truck', // 当前激活的tab（truck/bus）
				filterType: 1 // 1-货车 2-客车
			};
		},
		onPullDownRefresh() {
			this.current_page = 1;
			this.reload = true;
			this.loadData();
		},
		onReachBottom() {
			if (this.current_page >= this.last_page) {
				this.status = 'noMore';
			} else {
				this.current_page = this.current_page + 1;
				this.status = 'loading';
				this.loadData(true);
			}
		},
		onLoad(option) {
			this.source = option.source;
			this.order_id = option.order_id;
			this.loadData();
		},
		methods: {
			async loadData(reload) {
				// 在请求中添加搜索和过滤参数
				await uni.request({
					url: '/wanlshop/Arrival/getArrivalAuditList',
					data: {
						page: reload ? this.current_page : 1,
						keyword: this.searchKeyword, // 添加搜索关键词
						type: this.filterType ,// 添加类型过滤
						arrival_id:4
					},
					success: res => {
						if (reload) {
							this.addressList = this.addressList.concat(res.data.data);
						} else {
							this.addressList = res.data.data;
							uni.stopPullDownRefresh();
						}
						this.total = res.data.total;
						this.current_page = res.data.current_page;
						this.last_page = res.data.last_page;
						this.status = res.data.total == 0 ? 'noMore' : 'more';
					}
				});
			},

			// 切换Tab
			switchTab(tab) {
				this.activeTab = tab;
				this.filterType = tab === 'truck' ? 1 : 2;
				this.current_page = 1; // 重置页码
				this.loadData(); // 重新加载数据
			},

			// 搜索处理
			handleSearch() {
				this.current_page = 1; // 重置页码
				this.loadData(); // 重新加载数据
			},

			// 清空搜索
			clearSearch() {
				this.searchKeyword = '';
				this.handleSearch();
			},

			// 原有方法保持不变
			showContact(item) {
				this.currentContact = {
					phone: item.phone,
					wx: item.wx
				};
				this.contactModal = true;
			},
			hideContactModal() {
				this.contactModal = false;
			},
			makePhoneCall(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
			copyWechat(wechat) {
				uni.setClipboardData({
					data: wechat,
					success: () => {
						this.$wanlshop.msg('微信号已复制');
					}
				});
			},
			previewImage(images, index) {
				images = this.$wanlshop.oss(images);
				uni.previewImage({
					current: typeof images === 'string' ? 0 : index,
					urls: typeof images === 'string' ? [images] : images
				});
			}
		}
	};
</script>

<style>
	/* 新增搜索框样式 */
	.search-bar {
		background: #ffffff;
		padding: 20rpx 30rpx;
		border-bottom: 1px solid #f5f5f5;
	}

	.search-box {
		position: relative;
		display: flex;
		align-items: center;
		background-color: #f5f5f7;
		border-radius: 40rpx;
		padding: 0 20rpx;
		height: 70rpx;
	}

	.search-input {
		flex: 1;
		height: 100%;
		padding: 0 20rpx;
		font-size: 28rpx;
		color: #333;
	}

	.clear-btn {
		background: transparent;
		border: none;
		padding: 10rpx;
	}

	/* 新增Tab切换样式 */
	.tabs {
		display: flex;
		background: #ffffff;
		border-bottom: 1px solid #f5f5f5;
		padding: 0 30rpx;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		padding: 20rpx 0;
		font-size: 30rpx;
		color: #666;
		position: relative;
	}

	.tab-item.active {
		color: #e54d42;
		font-weight: bold;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 80rpx;
		height: 6rpx;
		background: #e54d42;
		border-radius: 3rpx;
	}

	/* 原有样式保持不变 */
	.default-avatar {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 50%;
		height: 50%;
		background-color: #f0f0f0;
		color: #666;
	}

	.debug-text {
		position: absolute;
		bottom: -30rpx;
		left: 0;
		font-size: 24rpx;
		color: red;
	}

	.cu-list.menu-avatar>.cu-item {
		padding: 20rpx 0;
		min-height: 240rpx;
		align-items: flex-start;
	}

	.cu-avatar.lg {
		width: 100rpx !important;
		height: 100rpx !important;
		position: relative;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.content {
		width: calc(100% - 120rpx);
	}

	.text-cut {
		display: block;
		-webkit-line-clamp: unset;
		-webkit-box-orient: unset;
		overflow: visible;
		text-overflow: unset;
		white-space: normal;
		word-break: break-word;
	}

	.image-container {
		margin-top: 20rpx;
	}

	.preview-image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 8rpx;
	}

	.cu-modal .cu-dialog {
		width: 80%;
		max-width: 600rpx;
		border-radius: 16rpx;
		overflow: hidden;
	}

	.cu-modal .padding-xl {
		padding: 30rpx 40rpx;
	}
</style>